<template>
  <div class="main-wrapper">
    <div class="banner_box">
      <img class="banner" :src="data.productImage">
      <div>
        <h3>{{data.productTitle}}</h3>
        <p>{{data.productDesc}}</p>
        <span v-if="day==-1?false:true">有效期：{{day}}天</span>
        <p style="height: 70px; line-height:70px;"><span style="font-size: 20px;">{{realPrice}}</span>元</p>
      </div>
      <!-- <img class="cir" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/de_circular.png"> -->
    </div>
    <div class="condition" v-if="data.conditions">
      <h3>{{data.conditions.title}}<span style="color: #999999;font-weight: 400">({{data.conditions.desc}})</span></h3>
      <div :class="{on:data.conditions.guaranteeStatus==1?true:false}" v-if="data.conditions.guaranteeStatus==1?true:false">
        <p>{{data.conditions.guaranteeAmount}}</p>
        <span>已满足 <i></i></span>
      </div>
      <div :class="{on:data.conditions.guaranteeStatus==1?true:false}" @click.stop.prevent='conditions(7,data.conditions.guaranteeAmountValue)' v-if="data.conditions.guaranteeStatus==0?true:false">
        <p>{{data.conditions.guaranteeAmount}}</p>
        <span>去缴纳 ></span>
      </div>
      <div :class="{on:data.conditions.micoinStatus==1?true:false}" v-if="data.conditions.micoinStatus==1?true:false">
        <p>{{data.conditions.guaranteeMiCoin}}</p>
        <span>已满足 <i></i></span>
      </div>
      <div :class="{on:data.conditions.micoinStatus==1?true:false}" @click.stop.prevent='conditions(3,data.conditions.guaranteeMiCoinValue)' v-if="data.conditions.micoinStatus==0?true:false">
        <p>{{data.conditions.guaranteeMiCoin}}</p>
        <span>去充值 ></span>

      </div>
    </div>
    <ul class="list" :class="{addclass:addclass?true:false}">
      <!--产品类型1免押金卡，2白菜卡，3体验卡 4亲情卡-->
      <li v-if="ifpaymentType==1"
          :class="{on:flag==index?true:false}"
          v-for="(item,index) in data.priceList" :key="index"
          @click="tap(index,item.validPeriod,item.realPrice,item.id,item.validPeriod)">
        <img class="card-bg" src="/static/images/shop-item-bg.png"/>
        <i class="discount" v-if="item.discount==0||!item.discount?false:true">{{item.discount}}折</i>
        <div>
          <div class="content">
            <div class="left">
              <div>
                <text>¥</text>
                <text class="price">{{item.realPrice}}</text>
              </div>
            </div>
            <div class="middle">
              <div class="tag">
                <span v-if="item.realPrice==item.originalPrice?false:true">原价 ¥{{item.originalPrice}}</span>
              </div>
              <div class="time">
                <span v-if="item.validPeriod==-1">永久有效</span>
                <span v-else>有效期：{{item.validPeriod}}天</span>
              </div>
            </div>
          </div>
          <div class="alert">
            {{item.description}}
          </div>
        </div>
      </li>


      <!-- ---------暂时不需要----------- -->
      <li v-if="ifpaymentType==2"
          :class="{on:flag==index?true:false}"
          v-for="(item,index) in data.priceList" :key="index"
          @click="tap(index,item.validPeriod,item.realPrice,item.id,item.validPeriod)">
        <i class="discount on1" v-if="item.discount==0||!item.discount?false:true"><span
          v-if="item.validPeriod==-1?false:true">有效期{{item.validPeriod}}天 </span>{{item.discount}}折</i>
        <i class="discount" v-if="item.discount||item.validPeriod==-1?false:true">有效期{{item.validPeriod}}天</i>

        <div>
          <div>
            <h2>{{item.cardAmout}}金币 ¥{{item.realPrice}}</h2>
            <!--<h2 v-else>{{item.cardAmout}}蜜币 ¥{{Number(item.realPrice).toFixed(2)}}</h2>-->
            <p v-if="item.realPrice==item.originalPrice?false:true">原价 ¥{{item.originalPrice}}</p>
          </div>
          <div class="text_1">{{item.description}}</div>

        </div>
      </li>
      <li v-if="ifpaymentType==3"
          :class="{on:flag==index?true:false}"
          v-for="(item,index) in data.priceList" :key="index"
          @click="tap(index,item.validPeriod,item.realPrice,item.id,item.validPeriod)">
        <img class="card-bg" src="/static/images/shop-item-bg.png"/>
        <i class="discount" v-if="item.discount==0||!item.discount?false:true">{{item.discount}}折</i>
        <div>
          <div class="content">
            <div class="left">
              <div>
                <text>¥</text>
                <text class="price">{{item.realPrice}}</text>
              </div>
            </div>
            <div class="middle">
              <div class="tag">
                <span v-if="item.realPrice==item.originalPrice?false:true">原价 ¥{{item.originalPrice}}</span>
              </div>
              <div class="time">
                <span v-if="item.validPeriod==-1">永久有效</span>
                <span v-else>有效期：{{item.validTimes}}次</span>
              </div>
            </div>
          </div>
          <div class="alert">
            {{item.description}}
          </div>
        </div>
      </li>
      <li v-if="ifpaymentType==4||ifpaymentType==6"
          :class="{on:flag==index?true:false}"
          v-for="(item,index) in data.priceList" :key="index"
          @click="tap(index,item.validPeriod,item.realPrice,item.id,item.validPeriod)">
        <img class="card-bg" src="/static/images/shop-item-bg.png"/>
        <i class="discount" v-if="item.discount==0||!item.discount?false:true">{{item.discount}}折</i>
        <div>
          <div class="content">
            <div class="left">
              <div>
                <text>¥</text>
                <text class="price">{{item.realPrice}}</text>
              </div>
            </div>
            <div class="middle">
              <div class="tag">
                <span v-if="item.realPrice==item.originalPrice?false:true">原价 ¥{{item.originalPrice}}</span>
              </div>
              <div class="time">
                <span v-if="item.validPeriod==-1">永久有效</span>
                <span v-else>有效期：{{item.validPeriod}}天</span>
              </div>
            </div>
          </div>
          <div class="alert">
            {{item.description}}
          </div>
        </div>
      </li>
      <!-- -------------暂时不需要--------- -->
    </ul>
    <div class="text">
      <h1>购卡需知</h1>
      <p v-for="(item,index) in notices" :key="index" v-if="item!==''">{{item}}</p>
    </div>
    <div class="foot">
      <p class="btnBuy" @click="payBtn">{{payBtnText}}</p>
    </div>
    
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data () {
      return {
        flag: '',
        day: '',
        data: '',
        notices: '',
        realPrice: '',
        realPrice2: '',
        alert: false,
        addclass: false,
        de_wechat: true,
        zfb: false,
        payMethod: '',
        conditionsPaymentType: '',
        id: '',
        appFrom: '',
        paymentType: '',
        ifpaymentType: '',
        payBtnText: '立即购买',
        productId: '',
        disable: false,
        isExpPay: false
      }
    },
    onUnload() {
      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {
      console.log(options)
      this.productId = options.productId
      this.paymentType = options.paymentType
      this.ifpaymentType = options.paymentType
    },
    onShow(){
      this.getInfo()
    },
    methods: {
      conditions(id, amount) {
        this.conditionsPaymentType = id
        if (this.conditionsPaymentType == 3) {
          wx.navigateTo({
            url: `../coinRecharge/main`
          })

          return
        }
        this.realPrice2 = amount
        if (!this.disable) {
          this.payment('bzj')
        }
      },
      expPay(data) { //体验卡预支付
        let _this = this
        Service.expPay(data).then((res) => {
          if (res.code == 200) {
            let payParam = res.data
            wx.requestPayment({
              timeStamp: res.data.timeStamp + '',
              nonceStr: res.data.nonceStr + '',
              package: res.data.package + '',
              signType: 'MD5',
              paySign: res.data.sign + '',
              success(res) {
                wx.showToast({
                  title: '购买成功',
                  icon: 'success',
                  duration: 2000
                });
                setTimeout(() => {
                  wx.navigateTo({
                    url: '/pages/cardPaySuccess/main'
                  })
                }, 2000)
              },
              fail(res) {
                _this.disable = false
              }
            })
          }
        })
      },
      prePay(data,type) { //普通预支付
        let _this = this
        Service.prePay(data).then((res) => {
          if (res.code == 200) {
            let payParam = res.data
            wx.requestPayment({
              timeStamp: res.data.timeStamp + '',
              nonceStr: res.data.nonceStr + '',
              package: res.data.package + '',
              signType: 'MD5',
              paySign: res.data.sign + '',
              success(res) {
                if (type == 'bzj') {
//                  Object.assign(_this.$data, _this.$options.data())
                  _this.getInfo()
                } else {
                  wx.showToast({
                    title: '购买成功',
                    icon: 'success',
                    duration: 2000
                  });
                  setTimeout(() => {
                    wx.navigateTo({
                      url: '/pages/cardPaySuccess/main'
                    })
                  }, 2000)
                }

              },
              fail(res) {
                _this.disable = false
              }
            })
          }
        })
      },
      payment(type) {
        let _this = this
        this.disable = true
        setTimeout(() => {
          _this.disable = false
        }, 2000)
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
            if (res.code) {
              let data = {code: res.code}
              Service.jscode2session(data).then((res) => {
                if (res) {
                  if (_this.isExpPay) { //体验卡预支付
                    let data = {
                      payMethod: '1',//微信
                      productId: _this.productId,
                      couponPriceId: _this.id,
                      openId: res.openid
                    }
                    _this.expPay(data)
                  } else {
                    let data = {
                      payMethod: '1',//微信
                      paymentType: _this.paymentType,
                      productId: _this.productId,
                      payAmount: _this.realPrice,
                      depositCardType: _this.id,
                      unlimitedCardId: _this.id,
                      priceId: this.id,
                      adPosition: '11',
                      openId: res.openid
                    }
                    if (type == 'bzj') {
                      data.paymentType = _this.conditionsPaymentType
                      data.payAmount = _this.realPrice2
                    }
                    _this.prePay(data,type)
                  }
                }
              })
            }
          }
        })

      },
      payBtn() {
        if (!this.disable) {
          this.isExpPay = false
          var paymentType = this.paymentType
          console.log(paymentType)

          // 产品类型1免押金卡，2白菜卡，3体验卡
          //支付类型 1用车，2冲押金，3冲蜜币，5购买押金卡，6,购买无限卡 ，7,支付保证金，14支付加盟，15骑士紧急换电，16专属车购买(xks用)，17个人紧急换电，18换电订单升级,19考拉小程序押金，20专属车套餐续期(szc用)
          console.log(paymentType);
          if (paymentType == 3) {
            this.isExpPay = true
            this.payment()
            return
          } else {
            this.paymentType = this.data.paymentType
          }

          this.payment()
        }
      },
      tap(index, day, realPrice, id, validPeriod) {
        if (validPeriod == -1) {
          this.day = validPeriod
        } else {
          this.day = day
        }
        this.flag = index;

        this.id = id
        this.realPrice = realPrice
      },
      getInfo(){
        let data = {
          adPosition: '11',
          productId: this.productId
        }
        let that = this
        Service.getCouponProductsDetails(data).then((res)=>{
          if (res.code == 200) {
            that.data = res.data;
            // that.data.priceList.forEach((item) => {
            //   item.realPrice = Number(item.realPrice).toFixed(2)
            //   item.originalPrice = Number(item.originalPrice).toFixed(2)
            // })
            that.day = res.data.priceList ? res.data.priceList[0].validPeriod : ''

            that.realPrice = res.data.priceList ? Number(res.data.priceList[0].realPrice).toFixed(2) : 0.00
            that.notices = res.data.notices
            that.id = res.data.priceList[0].id
//            console.log(that.id)
//            that.paymentType = res.data.paymentType
//            that.flag = that.GetQueryString('flag')
//            if (that.GetQueryString('flag')) {
//
//              that.day = res.data.priceList ? res.data.priceList[that.flag].validPeriod : ''
//
//              that.realPrice = that.data.priceList[that.flag].realPrice
//              that.id = that.data.priceList[that.flag].id
//            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  .banner_box {
    padding: .3rem 0 0;
    text-align: center;
  }
  .banner_box .card-price {
    font-size: 40px;
  }

  .banner {
    width: 6.7rem;
    height: 350px;
  }

  .cir {
    margin-top: -.8rem;
    position: relative;
    z-index: 1;
    float: left;
    width: 750px;
    height: 88px;
  }

  .list {
    padding: .2rem .3rem 0;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*justify-content: space-between;*/
  }

  .list li {
    background: #fff;
    position: relative;
    margin-bottom: .3rem;
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: left;
    align-items: center;
    width: 700px;
    height: 212px;
  }

  .list li .card-bg{
    width: 700px;
    height: 212px;
    vertical-align: top;
  }

  .list .on {
    border: .04rem solid #FED130;
  }

  .list li > div {
    display: block;
    position: absolute;
    left:0;
    top:0;
    width: 700px;
    height: 212px;
    justify-content: space-between;
  }

 .list li > div .content {
    display: block;
    width: 100%;
    height: 155px;
  }
.list li > div .alert {
    display: block;
    height: 55px;
    line-height: 60px;
    color: #ff9c00;
    padding-left: 28px;
  }
.list li > div .content .left {
    display: block;
    float: left;
    width: 200px;
    height: 155px;
    text-align: center;
  }
.list li > div .content .left text {
    height: 75px;
    line-height: 75px;
    font-size: 24px;
    color: #f6390d;
  }
.list li > div .content .left text.price {
    height: 155px;
    line-height: 155px;
    font-size: 40rpx;
  }

.list li > div .content .middle {
    display: block;
    float: left;
    width: 480px;
    height: 80px;
    line-height: 40px;
    padding-left: 10px;
    margin-top: 37px;
  }

.list li > div .content .middle .time {
    margin-top: 14px;
    color: #8c8c8b;
    font-size: 24px;
  }

  .list .discount {
    position: absolute;
    right: 30px;
    top: 20px;
    height: .35rem;
    background-image: url('https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/youhui.png');
    background-size: 100% 100%;
    display: block;
    font-size: .2rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: .35rem;
    font-style: normal;
    text-align: center;
    padding: 0 0.3rem;

  }

  .list.addclass .discount {
    line-height: .42rem;
  }

  .list .discount.on1 {
    background: #FED130;
    color: #333;
  }

  .list .on .discount {
    right: 30px;
    top: 20px;
  }

  .list h2 {
    margin-bottom: 0;
    text-align: left;
    font-size: .3rem;
    /*font-family: PingFangSC-Semibold;*/
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: .41rem;
    /*margin-top: .2rem;*/
  }

  .list li p {
    text-align: center;
    font-size: .26rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999999;
    line-height: .37rem;
    margin-left: .37rem;
    text-decoration: line-through;
  }

  .list li > div div.text_1 {
    text-align: left;
    font-size: .24rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: .33rem;
    margin-top: .05rem;
    display: block;
  }

  .text {
    padding-bottom: 200px;
  }

  .text h1 {
    font-size: .3rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: .3rem;
    width: 6.9rem;
    margin: 0 auto;
    padding-bottom: .1rem;
  }

  .text p {
    width: 6.9rem;
    /*height: 2.1rem;*/
    font-size: .26rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: .5rem;
    margin: 0 auto;
  }

  .btnBuy {
    display: block;
    background: #FED130;
    border-radius: .45rem;
    width: 2.37rem;
    height: 90px;
    font-size: .3rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #333;
    line-height: .42rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 10px;
  }
  .foot{
    position: fixed;
    left:0;
    right: 0;
    bottom:0;
    height:110px;
    line-height: 90px;
    background:rgba(255,255,255,1);
    box-shadow:0px -2px 30px 0px rgba(0,0,0,0.1);
  }

  .foot p.on {
    width: 3.37rem;
  }
  .condition h3 {
    width: 6.9rem;
    margin: .3rem auto;
    font-size: .3rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: .3rem;
  }

  .condition div {
    width: 6.9rem;
    height: .8rem;
    background: rgba(246, 246, 246, 1);
    font-weight: 400;
    border-radius: .1rem;
    font-family: PingFangSC-Regular;
    overflow: hidden;
    line-height: .8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .3rem;
    margin: 0 auto .2rem;
    box-sizing: border-box;
  }

  .condition div.on {
    /*display: flex;*/
    background: linear-gradient(94deg, rgba(255, 240, 205, 1) 0%, rgba(255, 226, 169, 1) 100%);
  }

  .condition div.on i {

    display: block;
    background: url("https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/de_ok.png") no-repeat;
    width: .3rem;
    height: .3rem;
    background-size: 100%;
    float: right;
    margin-left: .1rem;
    margin-top: .05rem;
  }

  .condition div:last-child {
    margin: 0 auto 0;
  }

  .condition div p {
    font-size: .26rem;
    color: rgba(51, 51, 51, 1);
    line-height: .37rem;
  }

  .condition div span {
    font-size: .26rem;
    color: rgba(51, 51, 51, 1);
    line-height: .37rem;
  }

  .banner_box div {
    position: absolute;
    top: .8rem;
    left: .8rem;
    text-align: left;
  }

  .banner_box h3 {
    font-size: .36rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: .5rem;
  }

  .banner_box p, .banner_box span {
    font-size: .26rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: .5rem;
  }

</style>
